<template>
	<view class="content">

		<view class="navBar">
			<view @click="select_type(0)">
				<text class="gui-icons gui-color-gray">&#xe624;</text>
				<view class="typeName" :class="type_index == 0 ? 'typeYes' : ''">意见反馈</view>
			</view>
			<view @click="select_type(3)">
				<text class="gui-icons gui-color-gray">&#xe628;</text>
				<view class="typeName" :class="type_index == 3 ? 'typeYes' : ''">常见问题</view>
			</view>
			<view v-if="is_audit == 1" @click="select_type(1)">
				<text class="gui-icons gui-color-gray">&#xe60d;</text>

				<view class="typeName" :class="type_index == 1 ? 'typeYes' : ''">我的审核</view>
			</view>
			<view @click="select_type(2)">
				<text class="gui-icons gui-color-gray">&#xe6fe;</text>

				<view class="typeName" :class="type_index == 2 ? 'typeYes' : ''">我的反馈</view>
			</view>
		</view>

		<view v-if="type_index == 0">

			<form action="">

				<view class="tou">
					<view class="wenti">选择反馈类型</view>
					<view class="xuanxiang">
						<view v-for="(item, idx) in tags" class="item">
							<view :class="feedback_index == item.id ? 'feedbackYes' : 'feedbackNo'"
								@tap="select_feedback(item.id, item.text)">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>

				<view class="zhong">
					<view class="wenti">问题</view>
					<textarea class="shuruk yijian" v-model="txt" placeholder="请写下您的意见或建议"></textarea>

					<!-- <view class="gui-margin-top" style="width: 100%; padding-left: 20rpx;">
						<text class="gui-h4">上传图片</text>

						<view style="display: flex; flex-wrap: wrap; width: 100%;">
							<view class="" v-for="(item,index) in imgs"
								style="width: 132rpx; height: 120rpx; border-radius: 20rpx; margin: 20rpx 15rpx;"
								:key="index">
								<image style="width: 100%; height: 85rpx;" @tap="show_img(item)" :src="imgurl + item"
									mode="">
								</image>

								<view style="text-align: center; font-size: 30rpx;" @click="dele_file_img(index)">删除
								</view>
							</view>

							<view @tap="upload_auth" v-if="imgs.length < 8"
								style="width: 135rpx; height: 130rpx; background-color: #e7e7e7; text-align: center; border-radius: 15rpx; margin: 20rpx 15rpx;">
								<text class="gui-h1 gui-color-gray" style="line-height: 120rpx;">+</text>
							</view>
						</view>

					</view> -->

				</view>

			</form>

			<view class="gui-padding submit" v-if="count < 1">
				<button type="warn" @click="submit">提交</button>
			</view>

		</view>

		<!-- 常见问题 -->
		<view v-if="type_index == 3">

			<view class="" v-if="problem.length <= 0">

				<view style="text-align: center;">暂无数据</view>
			</view>

			<view class="auditRecord">
				<view style="background-color: white;" v-for="(item, index) in problem">
					<view class="auditContent">
						<view class="auditDetails">
							<view>主题：{{item.title}}</view>
							<view class="censorContent">内容：{{item.content}}</view>
						</view>
						<view class="auditExamine" style="padding: 20rpx 0 0 0;" @click="common_problems(item.id)">

							<text class="gui-icons"> </text>
							<view>查看</view>
						</view>
					</view>
				</view>
				<!-- <uni-pagination :show-icon="true" :total="18" :pageSize="8" /> -->
			</view>
		</view>

		<!-- 我的审核 -->
		<view v-if="type_index == 1">
			<view class="audit">
				<view @click="get_sh_list(0)" :class="current == 0 ? 'auditYes' : ''">未审核</view>
				<view @click="get_sh_list(1)" :class="current == 1 ? 'auditYes' : ''">已审核</view>
			</view>

			<view class="" v-if="sh_list.length <= 0">
				<view style="width: 500rpx; height: 500rpx; margin: 0 auto; margin-top: 100rpx;">
					<!-- <image style="width: 100%; height: 100%;" src="@/static/zwsj.png" mode="">
					</image> -->
				</view>
				<view style="text-align: center;">暂无数据</view>
			</view>

			<view class="auditRecord">
				<view style="background-color: white;" v-for="(item, index) in sh_list">
					<view class="auditContent">
						<view class="auditDetails">
							<view>主题：{{item.title}}</view>
							<view class="censorContent">内容：{{item.content}}</view>
						</view>
						<view class="auditExamine" style="padding: 20rpx 0 0 0;" @click="examine(item.id)">
							<!-- <image src="@/static/ck.png" alt=""></image> -->
							<view>查看</view>
						</view>
					</view>
				</view>
				<!-- <uni-pagination :show-icon="true" :total="18" :pageSize="8" /> -->
			</view>
		</view>

		<!-- 我的反馈 -->
		<view v-if="type_index == 2">

			<view class="" v-if="list.length <= 0">
				<view style="width: 500rpx; height: 500rpx; margin: 0 auto; margin-top: 100rpx;">
					<image style="width: 100%; height: 100%;" src="@/static/zwsj.png" mode="">
					</image>
				</view>
				<view style="text-align: center;">暂无数据</view>
			</view>

			<view v-else style="margin-bottom: 80rpx;">
				<!-- 卡片内容 -->
				<view class="coreContent" v-for="(item,index) in list" @click="myFeedback(item.id)">
					<view class="shenhezt">
						<view v-if="item.this_process" class="panduan">
							<!-- <img class="tubiao" src="@/static/ing.png" alt=""> -->
							<view class="underline">审核中</view>
						</view>
						<view v-if="!item.this_process" class="panduan">
							<!-- <img class="tubiao" src="@/static/ok.png" alt=""> -->
							<view class="underline">已完成</view>
						</view>
					</view>
					<view class="">主题：{{item.title}}</view>
					<view class="">姓名：{{item.user_name}}</view>
					<view class="feedback">反馈内容：{{item.content}}</view>
					<view class="auditExamine" style="margin-top: 8rpx;">
						<!-- <image src="@/static/ck.png" alt=""></image> -->
						<view>查看</view>
					</view>
				</view>
			</view>

		</view>
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="READ_EXTERNAL_STORAGE"></yk-authpup>
	</view>
</template>
<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import permision from "@/Grace6/js/permission.js"

	export default {
		components: {
			ykAuthpup
		},
		data() {
			return {
				user: uni.getStorageSync("member"),
				pages: 0,
				current: 0,
				feedback_index: 0,
				feedback_text: '程序bug',
				type_index: 0,
				tags: [{
						id: 0,
						text: "程序bug",
					},
					{
						id: 1,
						text: "功能建议",
					},
					{
						id: 2,
						text: "内容建议",
					},
					{
						id: 3,
						text: "网络问题",
					},
					{
						id: 4,
						text: "其他",
					}
				],
				txt: '',
				imgs: [],
				token: uni.getStorageSync("token"),
				is_audit: 0,
				list: [],
				sh_list: [],
				count: 0,
				imgurl: '',
				problem: [{
						id: 1,
						title: '其他',
						content: '进入页面出现“user error”问题',
					},
					{
						id: 2,
						title: '其他',
						content: '进入页面空白',
					},
					{
						id: 3,
						title: '其他',
						content: '如何查看app版本号',
					},
					{
						id: 4,
						title: '其他',
						content: '如何检查更新',
					},
					{
						id: 5,
						title: '其他',
						content: '如何清除缓存',
					},
					{
						id: 6,
						title: '其他',
						content: '首页头部导航背景与下方背景对应不上',
					}
				],
			}
		},
		onLoad(opt) {
			this.show_loading();
			this.imgurl = this.$public_config.apiUrl.replace("api", "");
			this.get_list();
		},
		methods: {
			upload_auth() {
				this.$refs['authpup'].open()
				//this.upload_img();
				
				// permision.premissionCheck("EXTERNAL_STORAGE").then((result)=>{
				// 	console.log("upload_auth",result);
				// 	if(result == 1) {
				// 		// 此处处理各自业务 如：uni.chooseImage  
				// 		this.upload_img();
				// 	}
				// })
				
			},
			changeAuth() {
				console.log("changeAuth");
				let self=this;
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，此时可以调用uni的chooseImage等api了');
				
				// uni.showModal({
				// 	title:"权限申请",
				// 	content:"是否允许访问相册的权限，用于上传图片，反馈建议！",
				// 	confirmText:"允许",
				// 	cancelText:"不允许",
				// 	success(res) {
				// 		if(res.confirm){
							self.upload_img();
				// 		}
				// 	}
				// })
			},
			show_loading() {
				uni.showLoading({
					title: '请稍候...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
			select_feedback(id, text) {
				this.feedback_index = id
				this.feedback_text = text
			},
			select_type(id) {
				this.type_index = id
				if (id == 1) {
					this.get_sh_list(0);
				}
			},
			get_list() {
				let self = this
				console.log('token: ', self.token);
				this.$boya.NGet("/app/mailbox/get_mail_list", {
					pages: self.pages
				}, function(res) {
					self.hide_loading();

					for (var j = 0; j < res.data.list.length; j++) {
						if (res.list[j].title != '提问' && res.data.list[j].title != '建议') {
							self.list.push(res.data.list[j])
						}
					}
					console.log('list: ', self.list);
				})
			},
			get_sh_list(current) {
				// 还要做分页噢！
				let self = this
				self.show_loading();
				self.current = current
				console.log("current: ", self.current);
				self.sh_list = []

				this.$common.request({
					url: "api/mailbox/get_sh_list",
					data: {
						type: current,
						pages: self.pages,
						token: self.token
					},
				}, res => {
					console.log('res: ', res.data.sh_list);
					self.hide_loading();
					if (res.code == 200) {
						let sh_list = res.data.sh_list
						for (let i = 0; i < sh_list.length; i++) {
							// console.log('sh_list: ', sh_list[i]);
							if (sh_list[i].title != '建议' && sh_list[i].title != '提问') {
								self.sh_list.push(sh_list[i]);
							}
						}
						console.log('sh_list: ', self.sh_list);
					} else {
						uni.showModal({
							title: '提示',
							content: res.data
						});
					}
				});
			},
			upload_img(item, index) {
				let self = this;

				if (self.imgs.length >= 8) {
					self.$boya.msg('最多只可上传8张')
					return;
				}

				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						self.show_loading();
						uni.uploadFile({
							url: this.$public_config.apiUrl + '/app/mailbox/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								"authorization": "Bearer  " + uni.getStorageSync("Bearer")
							},
							success: (up_res) => {
								console.log("upload", up_res);
								self.hide_loading();
								let upload_res = JSON.parse(up_res.data);
								if (upload_res.code == 200) {
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									});
									self.imgs.push(upload_res.data);
								} else {
									uni.showModal({
										title: '提示',
										content: '上传失败'
									});
								}
								console.log(upload_res, 'up_res');
							}
						});
					}
				});
			},
			show_img(url) {
				uni.previewImage({
					urls: [url],
					index: 0
				});
			},
			dele_file_img(index) {
				this.imgs.splice(index, 1);
			},
			submit() {
				let self = this;
				self.count++
				if (!self.txt) {
					this.$boya.msg('请填写反馈内容')
					return
				} else {
					self.show_loading();
					this.$common.request({
						url: "api/mailbox/add_mail",
						data: {
							tp: 'feedback',
							content: self.txt,
							type: self.feedback_text,
							imgs: self.imgs,
							token: self.token
						},
					}, res => {
						self.hide_loading();
						console.log('res: ', res.data);
						self.count = 0
						if (res.code == 200) {
							uni.showModal({
								title: '提示',
								content: '提交成功',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										window.location.reload(true);
									}
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: res.data
							});
						}
					});
				}
			},
			common_problems(id) {
				uni.navigateTo({
					url: '/pages/other/feeback/commonProblem?id=' + id
				})
			},
			examine(id) {
				uni.navigateTo({
					url: '/pages/other/feeback/myAudit?id=' + id + '&token=' + this.token
				})
			},
			myFeedback(id) {
				uni.navigateTo({
					url: '/pages/other/feeback/myFeedback?id=' + id + '&token=' + this.token
				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url("https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png") 100% 100% / 100% 100%;
	}

	.wenti {
		font-size: 35rpx;
		margin-top: 15rpx;
		margin-left: 18rpx;
	}

	.wenti::before {
		content: "*";
		color: red;
	}

	.tou {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.xuanxiang {
		display: flex;
		flex-wrap: wrap;
		margin-top: 15rpx;
		margin-bottom: 10rpx;
	}

	.item>view {
		padding: 16rpx 40rpx;
		margin: 20rpx 25rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
	}

	.feedbackYes {
		color: white;
		background: linear-gradient(to right, #F55661, #F06C35);
	}

	.feedbackNo {
		background-color: #F5F6F9;
	}

	.zhong {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.yijian {
		padding-top: 15rpx;
		height: 380rpx;
	}

	.xia {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.shoujih {
		height: 90rpx;
	}

	.shuruk {
		width: 91%;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		margin-left: 18rpx;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background-color: #F5F6F9;
	}

	.tijiao {
		color: white;
		width: 80%;
		margin-top: 40rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #F06C35, #F55661);
	}

	.navBar {
		width: 93%;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 10rpx 8rpx 10rpx rgba(198, 200, 207, 0.8);
	}

	.navBar view {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		padding: 10rpx 0rpx;
		justify-content: space-around
	}

	.navBar view .gui-icons {
		font-size: 50rpx;
	}

	.typeYes {
		color: #E64340;
		font-weight: bold;
	}

	.typeName {
		font-size: 28rpx;
		margin-top: -10rpx;
	}

	.submit {
		margin-top: 20rpx;
	}

	.audit {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	.audit>view {
		width: 150rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		background-color: aliceblue;
		border-radius: 15rpx;
	}

	.auditYes {
		border: 3px solid white;
	}

	.auditRecord {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;
		color: #8a8a8a;
	}

	.auditContent {
		padding: 15rpx 30rpx;
		border: 1px solid #DBDFEA;
		margin-bottom: 60rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
	}

	.auditDetails>view {
		padding: 16rpx;
		border-bottom: 1px solid #DBDFEA;
	}

	.auditExamine {
		width: 125rpx;
		margin: 0 auto;
		display: flex;
	}

	.censorContent {
		width: 96%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.auditExamine>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.coreContent {
		width: 82%;
		height: 190rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
		line-height: 50rpx;
	}

	.feedback {
		width: 99%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.shenhezt {
		display: flex;
		align-items: center;
		color: #8B8B8B;
		float: right;
	}

	.panduan {
		display: flex;
		align-items: center;
	}

	.tubiao {
		width: 35rpx;
		height: 35rpx;
	}

	.underline {
		margin-left: 10rpx;
		border-bottom: 1px solid #8B8B8B;
	}
</style>